<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>自定义弧形节点</title>
    <script src="../build/g6.js"></script>
  </head>
  <body>
    <div id="mountNode"></div>
    <script>
      G6.registerNode('fannode', {
        draw(cfg, group) {
          const keyShape = group.addShape('fan', {
            attrs: {
              x: 50,
              y: 50,
              re: 40,
              rs: 30,
              startAngle: (1 / 2) * Math.PI,
              endAngle: Math.PI,
              clockwise: false,
              fill: '#b7eb8f',
            },
          });
          return keyShape;
        },
      });

      const data = {
        nodes: [
          {
            id: 'node1',
            x: 100,
            y: 200,
          },
          {
            id: 'node2',
            x: 300,
            y: 200,
          },
        ],
        edges: [
          {
            id: 'edge1',
            target: 'node2',
            source: 'node1',
          },
        ],
      };
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 500,
        height: 500,
        defaultNode: {
          shape: 'fannode',
        },
        defaultEdge: {
          color: '#91d5ff',
        },
      });
      graph.data(data);
      graph.render();
    </script>
  </body>
</html>
